<template>
    <div class="news">
        <h3>{{news.name}}</h3>
        <ul class="news_list">
            <router-link v-for="(item,index) in news.list"
                         tag="li"
                         :key="index"
                         :to="{name:'news',params:{newsid:item.id}}">
                <div class="news_img">
                    <img :src="item.img">
                </div>
                <div class="news_content">
                    <h3>{{item.title}}</h3>
                    <span>{{item.time}}</span>
                    <p>{{item.description}}</p>
                    <el-button type="primary">查看更多</el-button>
                </div>
            </router-link>
        </ul>
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[4, 6, 8, 10]"
                       :page-size="100"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="news.list.length">
        </el-pagination>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    computed: {
        ...mapGetters([
            'news'
        ])
    },
    created() {
        
    },
    methods: {
        handleSizeChange(val) {
            return this.news_2.slice(this.currentPage*val,this.currentPage*(val+1));
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {

            console.log(`当前页: ${val}`);
        }
    },
    watch: {
        $route() {
            this.$store.dispatch('get_news_list').then(() => {
                setTimeout(() => {
                    if (this.$route.params.category == 1) {
                        this.$store.dispatch('getNewsTitle', '公司新闻');
                    } else if (this.$route.params.category == 2) {
                        this.$store.dispatch('getNewsTitle', '医学前沿');
                    }
                }, 100)
            })
        }
    },
    data() {
        return {
            currentPage: 1,
            news_2:[]
        }
    }
}
</script>

<style lang="less">
.news {
    h3 {
        color: #1169b8;
        font-size: 16px;
    }
    .news_list li {
        display: inline-flex;
        padding: 20px;
        border-bottom: 1px solid #ddd;
        width: 100%;
        &:hover {
            cursor: pointer;
        }
        .news_img {
            width: 200px;
            img {
                width: 200px;
            }
        }
        .news_content {
            margin-left: 20px;
            position: relative;
            width: 100%;
            h3 {
                margin: 0;
                float: left;
            }
            span {
                float: right;
            }
            p {
                margin: 30px 0 0 0;
                line-height: 1.5;
                font-size: 14px;
            }
            .el-button {
                float: right;
            }
        }
    }

    .el-pagination {
        width: 100%;
        margin: 80px auto 40px auto;
        text-align: center;
    }
}
</style>